<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" type="text/css" href="../css/MyShare.css">
    <link rel="stylesheet" type="text/css" href="../css/words.css">


  </head>
  <body>
    <div class="page-group" id="page-collection" >
        <div class="page page-current" >
            <header class="bar bar-nav" style="background:white;">
                <a href="" class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class="title" style="color:black;font-size:18px;" id="Myfilm">收藏</h1>
                <a href="#">
            </a>
            </header>
            <div id="share_image">
                <img src="../images/Myimg.png" style="margin-left:25px; margin-top:15px;">
            </div>
            <div id="share_body">
                <label id="null_share">您暂时没有收藏</label>
                <label id="try_share">快去收藏吧</label>
            </div>
            <div class="content infinite-scroll" data-distance="100" style="display:none" id="J_serverList" >
                <div class="card" style="margin:0;" >
                    <div class="list-block media-list" v-for="data in bookList" >
                        <ul  class="list-container" >
                            <li class="item-content" v-on:click="greet($index)" >
                                <div class="item-media">
                                    <img width="60" height="80"  v-bind:src="data.eImageUrl">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title" style="font-size:1em;;margin-top:0;" >{{data.eBookName}}</div>
                                    <div class="item-subtitle" style="font-size:0.7em;color:orange;overflow:hidden" >{{data.eBookReview}}</div>
                                    <div class="item-subtitle" style="font-size:0.7em;margin-top:10px" >{{data.eBookReading}}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
        
            </div>
                
        </div>
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src = "../js/utils.js"></script>
    <script type="text/javascript" src = "../js/vue.js"></script>

    <script type="text/javascript">

        $(function(){
            var phonenumber = localStorage.getItem("phonenumber")
             AjaxIO.post('/getCollection', {
                 phonenumber: phonenumber
             }, function(results) {
                 if (results.data.bookList.length != 0) {

                     $('#share_image').remove()
                     $('#share_body').remove()
                     $('.content').attr('style', 'display:block');

                     new Vue({
                         el: '#J_serverList',
                         data: results.data,
                         methods: {
                             greet: function(event) {
                                 var index_c = results.data.bookList[event].tag
                                 localStorage.setItem("index_c", index_c)
                                 $.router.load("ebookRead.html");
                             }
                         }
                     })

                 }
             })

            $('.back').click(function(){
                try{
                    responesToPhone(true)
                } catch(error){

                }
             })
        })
         
         $(document).on("pageInit", "#page-collection", function(e, pageId, $page) {

             var phonenumber = localStorage.getItem("phonenumber")
             AjaxIO.post('/getCollection', {
                 phonenumber: phonenumber
             }, function(results) {
                     $('.content').click(function() {
                    var event = $(this).index()
                    var index_c = results.data.bookList[event].tag
                    localStorage.setItem("index_c", index_c)
                    $.router.load("ebookRead.html");
                })
             })
             $('.back').click(function(){
                try{
                    responesToPhone(true)
                } catch(error){

                }
             })

         })

       

         $(document).on("pageInit", "#page-read", function(e, pageId, $page) {

             var index = localStorage.getItem("index_c")

             AjaxIO.post("/getEbookDetailJson", {
                     index
                 },
                 function(result) {
                     $.get(result.data.bookUrl, function(data, atatus) {
                         $("textarea").html(data);
                     })
             });

            var moon_icon=document.getElementById("moon_icon");
            var bookTextarea=document.getElementById("bookTextarea");
            var sun_icon=document.getElementById("sun_icon")
            moon_icon.onclick=function () {
                    $('body').attr("class","theme-dark");
                    bookTextarea.style.backgroundColor = 'rgba(34,36,38,1)';
                    bookTextarea.style.color="#ffffff";
                    moon_icon.style.display = 'none';
                    sun_icon.style.display = 'block';
            }
            sun_icon.onclick=function () {
                  $('body').attr("class","none");
                    bookTextarea.style.backgroundColor = 'rgba(239,239,244,1)';
                    bookTextarea.style.color="black";
                    moon_icon.style.display = 'block';
                    sun_icon.style.display = 'none';
                
            }


         });


    
         function responesToPhone(isSuccess) {
         // alert("运行了")
            window.webkit.messageHandlers.responesToPhone.postMessage(isSuccess);
        }
    </script>

    <script>$.init()</script>

  </body>
</html>